<template>
  <div class="caogaoxiang">
    <!-- 上 -->
    <div class="header">
      <div class="headleft">
        <!-- <img class="fanhui" src="../assets/fanhui.png" alt=""> -->
        <img class="logo" @click="toindex" src="../assets/logo.png" style="margin-left:17px;" alt />
      </div>
      <div class="headzhong">
        <div class="headzhongitem" @click="totab(1)">
          <div>文章</div>
          <div v-if="toptab==1" class="xiahuaxian"></div>
        </div>
        <!-- <div class="headzhongitem" @click="totab(5)">
          <div>小视频</div>
          <div v-if="toptab==5" class="xiahuaxian"></div>
        </div> -->
        <div class="headzhongitem" @click="totab(2)">
          <div>视频</div>
          <div v-if="toptab==2" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="totab(3)">
          <div>问答</div>
          <div v-if="toptab==3" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="totab(4)">
          <div>投票</div>
          <div v-if="toptab==4" class="xiahuaxian"></div>
        </div>
      </div>
      <div class="headright">
        <div class="headright-fabu" @click="fabulist">发布</div>
        <div class="head-right-one">
          <img :src="userinfo.avatar" alt />
          <div>{{userinfo.nickname}}</div>
        </div>

        <div class="head-right-three" @click="showtuichu">
          <img src="../assets/tuichu.png" alt />
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="content">
      <!-- <div class="width:100%;height:34px;"></div> -->
      <div class="contentbox">
        <!-- 文章 -->
        <div class="wenzhang" v-if="toptab==1">
          <div class="contenttit">草稿箱-文章（{{cgxlist.length}}条）</div>

          <div v-for="(item,index) in cgxlist" :key="index">
            <div class="contentitem" v-if="item.cover[0]==''">
              <div class="xuanzhongtu">
                <img
                  @click="quxiao_xz(index)"
                  v-if="item.checked==true"
                  src="../assets/xuanzhong.png"
                  alt
                />
                <img
                  @click="xz(index)"
                  v-if="item.checked==false"
                  src="../assets/weixuanzhong.png"
                  alt
                />
              </div>
              <div class="caogaocontent">
                <!-- <div class="tupian">
                <img src="../assets/tu.jpg" alt="">
                </div>-->
                <div class="wenzi">
                  <div class="wenzitit">{{item.title}}</div>
                  <div class="wenzinr">
                    小九九：大学四面转了人生中的第一个十万，不得不说，如果从互联网上获得一些信息渠道之后，
                    真的可以改变自己的命运，让自己超过身边的大部分人。并且在这个最后，我还分享了一个价值上万，能让你在大学期间实现经…
                  </div>
                  <div class="wenzidibu">
                    <div class="wenzidibuleft">
                      <div>{{item.timeText}}</div>
                      <div class="meishi">{{item.plate.name}}</div>
                    </div>
                    <div class="wenzidiburight">
                      <div class="wenzidiburightbianji" @click="edit(index,'1')">
                        <img src="../assets/bianji.png" alt />
                        <div   >编辑</div>
                      </div>
                      <div class="wenzidiburightshanchu" @click="delcgx(index,'1')">
                        <img src="../assets/shanchu.png" alt />
                        <div >删除</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="contentitem" v-if="item.cover[0]!=''">
              <div class="xuanzhongtu">
                <img
                  @click="quxiao_xz(index)"
                  v-if="item.checked==true"
                  src="../assets/xuanzhong.png"
                  alt
                />
                <img
                  @click="xz(index)"
                  v-if="item.checked==false"
                  src="../assets/weixuanzhong.png"
                  alt
                />
              </div>
              <div class="caogaocontent">
                <div class="tupian">
                  <img :src="item.cover[0]" alt />
                </div>
                <div class="wenzi">
                  <div class="wenzitit">哪些网站帮你打开了新世界的大门?</div>
                  <div class="wenzinr">
                    小九九：大学四面转了人生中的第一个十万，不得不说，如果从互联网上获得一些信息渠道之后，
                    真的可以改变自己的命运，让自己超过身边的大部分人。并且在这个最后，我还分享了一个价值上万，能让你在大学期间实现经…
                  </div>
                  <div class="wenzidibu">
                    <div class="wenzidibuleft">
                      <div>1天前</div>
                      <div class="meishi">{{item.plate.name}}</div>
                    </div>
                    <div class="wenzidiburight">
                      <div class="wenzidiburightbianji" @click="edit(index,'1')">
                        <img src="../assets/bianji.png" alt />
                        <div >编辑</div>
                      </div>
                      <div class="wenzidiburightshanchu" @click="delcgx(index,'1')">
                        <img src="../assets/shanchu.png" alt />
                        <div >删除</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 小视频 -->
        <div class="shipin" v-if="toptab==5">
          <div class="contenttit">草稿箱-视频（{{cgxlist.length}}条）</div>
          <div class="contentitem" v-for="(item,index) in cgxlist" :key="index">
            <div class="xuanzhongtu">
              <img
                @click="quxiao_xz(index)"
                v-if="item.checked==true"
                src="../assets/xuanzhong.png"
                alt
              />
              <img
                @click="xz(index)"
                v-if="item.checked==false"
                src="../assets/weixuanzhong.png"
                alt
              />
            </div>
            <div class="caogaocontent">
              <div class="tupian">
                <img :src="item.cover[0]" alt />
              </div>
              <div class="wenzi">
                <div class="wenzitit">{{item.title}}</div>
                <div class="shipinwenzidibu">
                  <div class="wenzidibuleft">
                    <div>{{item.timeText}}</div>
                   
                  </div>
                  <div class="wenzidiburight">
                    <div class="wenzidiburightbianji" @click="edit(index,'5')">
                      <img src="../assets/bianji.png" alt />
                      <div >编辑</div>
                    </div>
                    <div class="wenzidiburightshanchu" @click="delcgx(index,'5')">
                      <img src="../assets/shanchu.png" alt />
                      <div >删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 视频 -->
        <div class="shipin" v-if="toptab==2">
          <div class="contenttit">草稿箱-视频（{{cgxlist.length}}条）</div>

          <div class="contentitem" v-for="(item,index) in cgxlist" :key="index">
            <div class="xuanzhongtu">
              <img
                @click="quxiao_xz(index)"
                v-if="item.checked==true"
                src="../assets/xuanzhong.png"
                alt
              />
              <img
                @click="xz(index)"
                v-if="item.checked==false"
                src="../assets/weixuanzhong.png"
                alt
              />
            </div>
            <div class="caogaocontent">
              <div class="tupian">
                <img :src="item.cover[0]" alt />
              </div>
              <div class="wenzi">
                <div class="wenzitit">{{item.title}}</div>
                <div class="wenzinr">
                  小九九：大学四面转了人生中的第一个十万，不得不说，如果从互联网上获得一些信息渠道之后，
                  真的可以改变自己的命运，让自己超过身边的大部分人。并且在这个最后，我还分享了一个价值上万，能让你在大学期间实现经…
                </div>
                <div class="wenzidibu">
                  <div class="wenzidibuleft">
                    <div>{{item.timeText}}</div>
                    <div class="meishi">{{item.plate.name}}</div>
                  </div>
                  <div class="wenzidiburight">
                    <div class="wenzidiburightbianji" @click="edit(index,'2')">
                      <img src="../assets/bianji.png" alt />
                      <div >编辑</div>
                    </div>
                    <div class="wenzidiburightshanchu" @click="delcgx(index,'2')">
                      <img src="../assets/shanchu.png" alt />
                      <div >删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 问答 -->
        <div class="wenzhang" v-if="toptab==3">
          <div class="contenttit">草稿箱-文章（{{cgxlist.length}}条）</div>
          <div class="contentitem" v-for="(item,index) in cgxlist" :key="index">
            <div class="xuanzhongtu">
              <img
                @click="quxiao_xz(index)"
                v-if="item.checked==true"
                src="../assets/xuanzhong.png"
                alt
              />
              <img
                @click="xz(index)"
                v-if="item.checked==false"
                src="../assets/weixuanzhong.png"
                alt
              />
            </div>
            <div class="caogaocontent">
              <!-- <div class="tupian">
                <img src="../assets/tu.jpg" alt="">
              </div>-->
              <div class="wenzi">
                <div class="wenzitit">{{item.title}}</div>
                <div class="wenzinr">
                 {{item.content}}
                </div>
                <div class="wenzidibu">
                  <div class="wenzidibuleft">
                    <div>{{item.timeText}}</div>
                    <div class="meishi" style="background: rgba(38, 106, 255, 1);width:auto;color:#fff;padding:0 10px;">{{item.bounty_gold}}乐讯币</div>
                  </div>
                  <div class="wenzidiburight">
                    <div class="wenzidiburightbianji" @click="edit(index,'3')">
                      <img src="../assets/bianji.png" alt />
                      <div >编辑</div>
                    </div>
                    <div class="wenzidiburightshanchu" @click="delcgx(index,'3')">
                      <img src="../assets/shanchu.png" alt />
                      <div >删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 投票票 -->
        <div class="wenzhang" v-if="toptab==4">
          <div class="contenttit">草稿箱-文章（{{cgxlist.length}}条）</div>
          <div class="contentitem" v-for="(item,index) in cgxlist" :key="index">
            <div class="xuanzhongtu">
              <img
                @click="quxiao_xz(index)"
                v-if="item.checked==true"
                src="../assets/xuanzhong.png"
                alt
              />
              <img
                @click="xz(index)"
                v-if="item.checked==false"
                src="../assets/weixuanzhong.png"
                alt
              />
            </div>
            <div class="caogaocontent">
              <!-- <div class="tupian">
                <img src="../assets/tu.jpg" alt="">
              </div>-->
              <div class="wenzi">
                <div class="wenzitit">{{item.title}}</div>
                <div class="wenzinr">
                  {{item.desc}}
                </div>
                <div class="wenzidibu">
                  <div class="wenzidibuleft">
                    <div>{{item.timeText}}</div>
                    <!-- <div class="meishi">美食</div> -->
                  </div>
                  <div class="wenzidiburight">
                    <div class="wenzidiburightbianji" @click="edit(index,'4')">
                      <img src="../assets/bianji.png" alt />
                      <div >编辑</div>
                    </div>
                    <div class="wenzidiburightshanchu" @click="delcgx(index,'4')">
                      <img src="../assets/shanchu.png" alt />
                      <div >删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



     <!-- 退出弹框 -->
    <div class="tuichutc" v-if="showtuichutc == true">
      <div class="tuichubox">
        <div class="tuichuhead">
          <div>退出登录</div>
          <img  @click="quxiao_tcdl" src="../assets/guanbi.png" alt />
        </div>
        <div class="tuichuzhong">确定要退出当前登录吗？</div>
        <div class="tuichuxia">
          <div></div>
          <div class="tuichuanniu">
            <div class="quxiaoanniu" @click="quxiao_tcdl">取消</div>
            <div class="quedinganniu" @click="queding_tcdl">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "caogaoxiang",
  data() {
    return {
      showtuichutc:false,
      toptab: 1,
      userinfo: "",
      cgxlist: ""
    };
  },
  watch: {
    '$route' (to, from) {
      // this.$router.go(0)
      var toptab = this.$route.query.toptab;
      console.log(toptab);
      this.toptab = toptab;
    }
  },
  mounted() {

     if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }


    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));

    var toptab = this.$route.query.toptab;
    console.log(toptab);
    this.toptab = toptab;

    this.getcgx_list();
  },
  methods: {
     toindex(){
      this.$router.push({ name: "indexbox", params: {} });
         this.$store.state.mianbaoxie=['乐讯号','主页','活动']
    },
    showtuichu(){
      console.log('aaaaa')
      this.showtuichutc=true
    },
    quxiao_tcdl(){
      this.showtuichutc=false
    },
    queding_tcdl(){
      localStorage.setItem('uqid','')
      this.$router.push({ name: "login", params: {} });
    },

    fabulist(){
      var aidlist=[]
      this.cgxlist.forEach(element => {
        if(element.checked==true){
          aidlist.push(element.id)
        }
      });

       this.$axios({
          method: "post",
          url: "media/descs/release_byid",
          data: this.$qs.stringify({
            uqid:localStorage.getItem('uqid'),
            type: this.toptab,
            aid: aidlist
          }),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(response => {
          console.log(response);
          if (response.data.error == "0") {
              this.$message({
              showClose: true,
              message:'发布成功',
              type: "success"
            });
            this.getcgx_list()
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: "error"
            });
          }
        });
    },
    totab(index) {
      this.toptab = index;
      this.getcgx_list();
      this.$router.push({ path: "/caogaoxiang", query: { toptab: index } });
    },
    getcgx_list() {
      // uqid
      // type
      // 1文章2视频3问答4投票5小视频
      // status
      // 0全部1已发布2未通过3已撤回4草稿
      // start
      // end
      // title
      // page
      // limit

      this.$get(
        // method: "get",
        "media/descs/desc_list",
        {
          uqid: localStorage.getItem("uqid"),
          type: this.toptab,
          status: 4,
          page: 1,
          limit: 100
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          response.data.forEach(element => {
            element.checked = false;
          });

          this.cgxlist = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    xz(index) {
      this.cgxlist[index].checked = true;
    },
    quxiao_xz(index) {
      this.cgxlist[index].checked = false;
    },

    //删除
    delcgx(index,type) {
      this.$axios({
        method: "post",
        url: "media/descs/is_del",
        data: this.$qs.stringify({
          uqid:localStorage.getItem('uqid'),
          aid: this.cgxlist[index].id,
          type: type,
         
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: "success"
          });
          this.getcgx_list()
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    //编辑
    edit(index,type){
      console.log('跳转')
      this.$router.push({ path: "/fawenedit", query: { type:type,aid:this.cgxlist[index].id } });
    }
  }
};
</script>

<style scoped>
/* <!-- 退出弹框 --> */
.tuichutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.tuichubox {
  width: 499px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.tuichuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.tuichuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.tuichuhead > img {
  width: 11px;
  height: 11px;
}
.tuichuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.tuichuxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.tuichuanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.caogaoxiang {
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 1);
}
/* 上 */
.header {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.headleft {
  display: flex;
  align-items: center;
}
.headleft .fanhui {
  width: 8px;
  height: 12px;
  margin-left: 15px;
  margin-right: 9px;
}
.headleft .logo {
  width: 89px;
  height: 30px;
}
.headzhong {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 46px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.headzhongitem {
  width: 48px;
  height: 100%;
  font-weight: 550;
  margin-right: 41px;
  text-align: center;
}
.headzhongitem .xiahuaxian {
  width: 34px;
  height: 2px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  margin: auto;
}
.headright {
  width:492px;
  height: 100%;
  display: flex;
  align-items: center;
   justify-content: flex-end;
}
.headright-fabu {
  width: 70px;
  height: 28px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-right: 13px;
}
.head-right-one,
.head-right-three {
  display: flex;
  align-items: center;
}
.head-right-one div {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 23px;
  margin-left: 10px;
}
.head-right-two {
  position: relative;
}
.head-right-one img {
  width: 30px;
  height: 30px;
}
.head-right-two img {
  width: 20px;
  height: 18px;
}
.redkuai {
  position: absolute;
  left: 11px;
  top: -4px;
  width: 15px;
  height: 11px;
  background: rgba(255, 0, 82, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  opacity: 0.5;
  border-radius: 4px;
}
.head-right-three img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-left: 30px;
}
/* 下 */
.content {
  width: 100%;
  height: calc(100vh - 48px);
  background: rgba(242, 242, 242, 1);
  opacity: 1;
  display: inline-block;
  /* overflow: hidden; */
}
.contentbox {
  width: 1052px;
  height: 768px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  margin: auto;
  margin-top: 38px;
  overflow-y: scroll;
  padding-left: 24px;
  padding-right: 59px;
  box-sizing: border-box;
}
.contentbox::-webkit-scrollbar {
  display: none;
}
/* 文章 */
.wenzhang {
  width: 100%;
  font-size: 16px;
  /* height: 100%; */
}
.contenttit {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 23px;
  margin-left: 25px;
}
.contentitem {
  width: 100%;
  opacity: 1;
  display: flex;
  padding-top: 18px;
}
.xuanzhongtu {
  width: 12px;
  height: 12px;
  margin-right: 13px;
}
.xuanzhongtu img {
  width: 12px;
  height: 12px;
}
.caogaocontent {
  width: calc(100% - 25px);
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(231, 237, 252, 1);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tupian {
  width: 195px;
  height: 124px;
  border-radius: 4px;
  margin-right: 10px;
}
.tupian img {
  width: 195px;
  height: 124px;
   object-fit: contain; background: #eee;
}
.wenzi {
  width: 100%;
  font-size: 16px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  overflow: hidden;
}
.wenzinr {
  font-size: 14px;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 11px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wenzidibu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.wenzidibuleft {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  display: flex;
  align-items: center;
}
.meishi {
  width: 49px;
  height: 23px;
  background: rgba(247, 247, 248, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  line-height: 23px;
  text-align: center;
  margin-left: 27px;
}
.wenzidiburight {
  display: flex;
  align-items: center;
}
.wenzidiburightbianji {
  display: flex;
  align-items: center;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.wenzidiburightbianji img {
  width: 14px;
  height: 16px;
  margin-right: 5px;
}
.wenzidiburightshanchu {
  display: flex;
  align-items: center;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.wenzidiburightshanchu img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/* 视频 */
.shipin {
  width: 100%;
  /* height: 100%; */
}
.shipinwenzidibu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 66px;
}
</style>